<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户数据管理</title>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div" style="width: 90%;margin-left: 50px;margin-top: 50px">
    <b style="color: #000066; font-size: 25px; margin-left:35px; margin-top:30px; font-style: oblique">用户管理</b>
    <el-table
            :data="pagination.items"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <!--prop数组中对象的属性名，label是显示的内容-->
        <!--        <el-table-column-->
        <!--                type="index"-->
        <!--                width="50">-->
        <!--        </el-table-column>-->
        <el-table-column
                prop="id"
                label="用户id"
                width="100">
        </el-table-column>
        <el-table-column label="头像" width="150">
            <template slot-scope="scope">
                <el-avatar shape="square" :size="50" :src="scope.row.avatar"></el-avatar>
            </template>
        </el-table-column>
        <el-table-column
                prop="nickname"
                label="昵称"
                width="160">
        </el-table-column>

        <el-table-column
                prop="gender"
                label="性别"
                width="100">
        </el-table-column>

        <el-table-column
                prop="city"
                label="城市"
                width="240">
        </el-table-column>

        <el-table-column
                prop="state"
                label="状态"
                width="160">
            <template slot-scope="scope">
                <i v-if="scope.row.state ==='正常'" class="el-icon-s-opportunity" style="color: lightgreen;"></i>
                <i v-else class="el-icon-s-opportunity" style="color: #FF5C6E;"></i>
                <span style="margin-left: 10px">{{ scope.row.state }}</span>
            </template>
        </el-table-column>


        <el-table-column label="位置"
                         width="100">
            <template slot-scope="scope">
                <!--
                    scope.row 表示当前行的对象
                    scope.row.id 表示当前行对象的id
                -->
                <el-button
                        @click="showLocation(scope.row.longitude,scope.row.latitude)"
                        size="mini">查看
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="用户登录位置" width="650px" height="500px" :visible.sync="dialogVisible">
        <div align="center">
            <iframe :src="iframeSrc" frameborder="false" width="600px" height="550px"></iframe>
        </div>
    </el-dialog>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <div style="margin-top: 50px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[3, 6, 8, 10]"
                :page-size="pagination.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.counts">
        </el-pagination>
    </div>
</div>

</body>
<script>
    new Vue({
        el: "#div",
        data: {
            iframeSrc: "",
            dialogVisible: false,
            tableData: [],//表格数据
            pagination: {
                items: [],
                page: 1, //当前页
                pagesize: 6,    //每页显示条数
                counts: 0        //总条数
            },
            authorization: "",

        },
        methods: {
            findByPage() {
                let url = '/manage/users';
                axios.get(url, {
                    headers: {
                        "Authorization": this.authorization
                    }, params: {
                        pagesize: this.pagination.pagesize,
                        page: this.pagination.page,
                    }
                }).then(resp => {
                    this.pagination = resp.data;
                });
            },
            handleSizeChange(val) {
                this.pagination.pagesize = val;
                this.findByPage();
            },
            handleCurrentChange(val) {
                this.pagination.page = val;
                this.findByPage();
            },
            showLocation(longitude, latitude) {
                this.dialogVisible = true;
                this.iframeSrc = "userLocation.html?longitude=" + longitude + "=&latitude=" + latitude;
                console.log(longitude + " " + latitude);
            }
        },
        created() {
            this.authorization = localStorage.getItem("Authorization");
            this.findByPage();
        }
    });
</script>
</html>